<template>
  <!--区域信息管理-->
  <el-row style="height:100%">
    <page @buttons="configPermissions">
      <pageheader :event="'physPopUp'" :isShow="buttonPermissions.isAdd">
        区域信息管理
      </pageheader>
      <div class="page-content">
        <el-card class="box-card">
          <el-row>
            <span>选择区域：</span>
            <el-cascader
              v-model="region.nameArr"
              :options="region.options"
              @change="handleItemChange"
              @visible-change="visibleChange"
              size="small"
              filterable
              :props="region.props"
              style="width:300px"
            ></el-cascader>
            <SearchInput
              style="margin-left: 20px"
              @physSearch="physSearch"
              :searchEvent="'physSearch'"
              :value.sync="keywords"
              :searchText="'请输入区域名称'"
              ref="clearText"
            >搜索：
            </SearchInput>
            <el-table :data="dataTable" size="small" stripe class="quyutable">
              <el-table-column label="序号" type="index" :index="indexMethod" align="center" width="60"></el-table-column>
              <el-table-column label="区域名称" prop="area_name" align="center" sortable></el-table-column>
              <el-table-column label="所属案场" prop="case_info_name" align="center" sortable></el-table-column>
              <el-table-column label="案场号" prop="case_code" align="center" sortable></el-table-column>
               <el-table-column label="标签类型" prop="tag_list" align="center" sortable></el-table-column>

              <el-table-column label="操作" align="center" :width="220+caozuoWidth">
                <template slot-scope="scope">
                  <el-button class="databtn" v-if="buttonPermissions.isBind"
                    @click="phySale(scope.row)" :class="scope.row.pos_count>0?'yibangding':''" size="small">销售设备<span v-if="scope.row.pos_count>0">{{scope.row.pos_count}}</span></el-button>
                  <el-button class="databtn" v-if="buttonPermissions.isFaceModify" 
                    @click="phyFace(scope.row)" :class="scope.row.face_device_count>0?'yibangding':''" size="small">人脸设备<span v-if="scope.row.face_device_count>0">{{scope.row.face_device_count}}</span></el-button>
                  <el-button class="databtn" v-if="buttonPermissions.phyPassFlowModify"
                    @click="phyPassFlow(scope.row)" :class="scope.row.zone_count>0?'yibangding':''" size="small">客流设备<span v-if="scope.row.zone_count>0">{{scope.row.zone_count}}</span></el-button>
                  <el-button v-if="buttonPermissions.isWatch || buttonPermissions.isModify"
                    @click="phyData(scope.row)" size="small">详情</el-button>
                  <el-button v-if="buttonPermissions.isDel"
                    type="danger" @click="phyDel(scope.row)"  size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination background
                           layout="total,sizes,prev,pager,next"
                           @current-change="currentChange"
                           @size-change="sizeChange"
                           :page-sizes="pagination.pageSizes"
                           :page-size.sync="pagination.pageSize"
                           :total="pagination.total"
                           :current-page.sync="pagination.currentPage"
                           class="paging fr">
            </el-pagination>
          </el-row>
        </el-card>
        <!--一级模态框-->
        <el-dialog v-dialogDrag :title="pageTitle" :visible.sync="isShow"  @close="closeDialog('ruleForm')"
                   :modal-append-to-body="false" :close-on-click-modal="false" top="5vh" width="1280px">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :inline="true" label-width="180px">
            <el-form-item label="区域名称" prop="area_name">
              <el-input v-model="ruleForm.area_name" size="small" style="width:400px"></el-input>
            </el-form-item>
            <div>
              <el-form-item label="选择企业" prop="company_id_arr">
                <el-input v-if="isDisabled" v-model="ruleForm.company_name" size="small" disabled style="width:200px"></el-input>
                <Cascader v-if="!isDisabled"
                          :value.sync="ruleForm.company_id_arr"
                          :options="companyOptions"
                          :changeEvent="'companyChange'"
                          :showAllLevels = 'false'
                          :width="'200px'"
                          :isClearable="false"></Cascader>
              </el-form-item>
              <el-form-item label="选择案场" label-width="80px" prop="case_info_id">
                <el-input v-if="isDisabled" v-model="ruleForm.case_info_name" size="small" disabled style="width:200px"></el-input>
                <el-select v-if="!isDisabled"
                           v-model="ruleForm.case_info_id" filterable placeholder="请选择案场"
                           @change="changeCaseInfo" size="small" style="width:200px">
                  <el-option
                    v-for="item in caseInfoOptions"
                    :key="item.id"
                    :label="item.case_name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
             <div>
              <el-form-item label="区域类型"  prop="areaType">
                <el-select v-model="ruleForm.areaType" multiple collapse-tags
                           @visible-change="areaTypeChange" size="small" style="width:200px;">
                  <el-option
                    v-for="item in areaOption"
                    :key="item.key"
                    :label="item.label"
                    :value="item.key">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择标签" label-width="80px" prop="tags_name">
                <el-input v-model="ruleForm.tags_name" size="small" readonly style="width:200px;">
                  <el-button slot="append" @click="opentagsDialog">修改</el-button>
                </el-input>
                <div @click="opentagsDialog" class="onClickDiv"></div>
              </el-form-item>
              <el-form-item label="营业时间" label-width="100px" prop="opening_hours_name">
                <el-input v-model="ruleForm.opening_hours_name" size="small" readonly style="width:200px;">
                  <el-button slot="append" @click="openingOpen">修改</el-button>
                </el-input>
                <div @click="xxyc=!xxyc" class="onClickDiv"></div>
              </el-form-item>
               <el-button :type="xxyc?'info':'primary'" :icon="xxyc?'el-icon-arrow-up':'el-icon-arrow-down'" size="small" @click="xxyc=!xxyc">{{xxyc?'收起':'更多'}}</el-button>
            </div>
            <div class="xialadiv" :class="xxyc?'':'xxyc'">
              <el-form-item label="区域长度"  prop="length">
                <el-input v-model="ruleForm.length" @change="lengthChange" type="number" size="small" style="width:200px">
                    <template slot="append">米</template>
                </el-input>
              </el-form-item>
              <el-form-item label="区域宽度" label-width="80px" prop="width">
                <el-input v-model="ruleForm.width" @change="widthChange" type="number" size="small"  style="width:200px">
                    <template slot="append">米</template>
                </el-input>
              </el-form-item>
              <el-form-item label="区域面积" label-width="100px" prop="square_meters">
                <el-input v-model="ruleForm.square_meters" type="number" size="small" style="width:200px">
                    <template slot="append">平方米</template>
                </el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="区域描述" prop="area_desc">
                <el-input v-model="ruleForm.area_desc" size="small" type="textarea" style="width:810px"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="isShow = false" size="small">取 消</el-button>
            <el-button v-if="buttonPermissions.isModify"
              type="primary" @click="confirmDialog('ruleForm')" size="small">保 存</el-button>
          </div>
          <!--二级挂载模态框-->
          <!--穿梭框-->
          <el-dialog v-dialogDrag title="标签管理" :visible.sync="showTransfer" append-to-body
                      @close="tagsClose"
                     style="text-align: center" :modal="false" :close-on-click-modal="false">
            <Transfer :value.sync="ls_tags_arr"
                      :options="transferData"
                      :event="'transferChange'"
                      @transferChange="transferChange"
                      v-if="tagsIsShow"
            ></Transfer>
            <div slot="footer" class="dialog-footer">
              <el-button @click="showTransfer = false" size="small">取 消</el-button>
              <el-button type="primary" @click="confirmTransfer" size="small">保 存</el-button>
            </div>
          </el-dialog>

          <!--营业时间-->
          <el-dialog title="营业时间" class="yysj" :visible.sync="showOpening" top="20vh" append-to-body
                     style="text-align: center" :modal="false" :close-on-click-modal="false" @opened="openedOpening" @close="closeOpening">
            <el-table :data="openingDataTable" size="small" ref="openingTable"
                    highlight-current-row @current-change="handleCurrentChange"
                      row-key="id">
              <el-table-column label="营业时间名称" prop="name" align="center"></el-table-column>
              <el-table-column label="营业时间描述" prop="info" align="center"></el-table-column>
              <el-table-column label="是否是公共营业时间" prop="isCommon" align="center"></el-table-column>
              <el-table-column label="操作" align="center" width="100">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.is_common != 1" @click="openingData(scope.row)" size="small">详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--营业时间详情-->
            <el-dialog title="营业时间详情" :visible.sync="showOpeningContent" width="60%" top="20vh"
                       append-to-body :modal="false" :close-on-click-modal="false">
              <el-form label-width="120px">
                <el-form-item label="名称：" prop="name">
                  <el-input v-model="openingContent.name" readonly size="small" style="width:70%"></el-input>
                </el-form-item>
                <el-form-item label="描述：" prop="info">
                  <el-input v-model="openingContent.info" readonly type="textarea" size="small" style="width:70%" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="营业时间列表：" prop="item_list">
                  <el-table :data="openingContent.item_list">
                    <el-table-column align="center" width="60px">
                      <template slot-scope="scope">
                        <i slot="reference" class="el-icon-sort"></i>
                        {{scope.row.level}}
                      </template>
                    </el-table-column>
                    <el-table-column label="描述" prop="info" align="center"></el-table-column>
                    <el-table-column label="是否是假日" prop="is_holiday" align="center">
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.is_holiday == 1" size="mini" type="success">是</el-tag>
                        <el-tag v-else size="mini" type="danger">否</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column label="开始日期" prop="start_day" align="center"></el-table-column>
                    <el-table-column label="结束日期" prop="end_day" align="center"></el-table-column>
                    <el-table-column label="营业时间" prop="open_time" align="center"></el-table-column>
                    <el-table-column label="结束时间" prop="close_time" align="center">
                      <template slot-scope="scope">
                        <span v-if="scope.row.close_time_next">{{scope.row.close_time_next}}</span>
                        <span v-else>{{scope.row.close_time}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="星期" prop="weeks" align="center"></el-table-column>
                  </el-table>
                </el-form-item>
              </el-form>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="showOpening = false" size="small">确 定</el-button>
            </div>
          </el-dialog>
          <!--二级挂载模态框-->
        </el-dialog>

        <!--一级模态框绑定pos-->
        <el-dialog v-dialogDrag title="绑定销售设备" :visible.sync="isShowPos" @close="posCloseDialog"
                   :modal-append-to-body="false" :close-on-click-modal="false" width="80%">
          <el-button @click="openSelectPosDeviceZone" size="small" type="primary">选择pos设备</el-button>
          <div class="headNamediv">
            <span><span style="color:#9ea4ff;font-weight:400;">当前选择：</span>案场:{{HeadName.caseName}}</span>
            <span style="margin-left:20px">区域:{{HeadName.areaName}}</span>
          </div>
          
          <el-table class="data-table" :row-key="getRowKeys" style="margin:10px 0px;"
                    :data.sync="posData.zone_list" height="500" size="mini" stripe>
            <el-table-column label="POS编号" prop="pos_code" align="center"></el-table-column>
            <el-table-column label="所属案场名称" prop="case_name" align="center"></el-table-column>
            <el-table-column label="api编号" prop="api_code" align="center"></el-table-column>
            <el-table-column label="api类型" prop="api_type" align="center"></el-table-column>
            <el-table-column label="描述" prop="pos_info" align="center"></el-table-column>
            <el-table-column label="table_code" prop="table_code" align="center"></el-table-column>
            <el-table-column label="是否绑定案场" prop="is_bind_case" align="center" width="120px">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.is_bind_case == 1" size="mini" type="success">是</el-tag>
                <el-tag v-else size="mini" type="danger">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="设备在线状态" prop="isOnlineName" align="center" width="120px">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.is_online == 1" size="mini" type="success">在线</el-tag>
                <el-tag v-else size="mini" type="danger">离线</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="最后数据时间" prop="last_data_time" align="center">
              <template slot-scope="scope">
                {{getTime(scope.row.last_data_time)}}
              </template>
            </el-table-column>
            <el-table-column label="最后活跃时间" prop="last_active_time" align="center">
              <template slot-scope="scope">
                {{getTime(scope.row.last_active_time)}}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100px" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="delPosDevice(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="isShowPos = false" size="small">取 消</el-button>
            <el-button type="primary" @click="posConfirmDialog"  size="small">保 存</el-button>
          </div>

          <!--二级挂载模态框-->
          <!--选择pos设备-->
          <el-dialog v-dialogDrag title="选择pos设备" :visible.sync="posDeviceZoneData.dialogTableVisible"
                     @close="closePosMonitorList" top="20px"
                     width="1100px" append-to-body
                     :close-on-click-modal='false' >
            <el-form :inline="true">
              <el-form-item label-width="240px" label="搜索POS编号、api编号、api类型:">
                <el-input v-model="posDeviceZoneData.keywords" clearable placeholder="请输入内容" size="mini"
                          style="width:300px;  vertical-align: middle;">
                  <el-button @click="posIsChange" type="primary" slot="append" icon="el-icon-search"
                             size="small"></el-button>
                </el-input>
              </el-form-item>
              <el-form-item label-width="100px" label="是否在线:">
                <el-select @change="posIsChange" v-model="posDeviceZoneData.is_online" size="mini">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="在线" value="1"></el-option>
                  <el-option label="离线" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label-width="100px" label="是否绑定:">
                <el-radio-group @change="posIsChange" v-model="posDeviceZoneData.search_type" size="mini">
                  <el-radio label="1">定向搜索</el-radio>
                  <el-radio v-if="buttonPermissions.isPosUnmounted" label="2">未挂载任何案场</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <el-table @selection-change="posHandleSelectionChange"
                      :row-key="getRowKeys" ref="posDeviceZoneTable"
                      :data="posDeviceZoneData.device_datas"
                      stripe tooltip-effect="dark" style="width: 100%" height="400"
                      class="data-table" size="mini">
              <el-table-column property="id" type="selection" :selectable="posCheckSelectable"
                               :reserve-selection="true" label="序号" width="50"></el-table-column>
              <el-table-column label="POS编号" prop="pos_code" align="center"></el-table-column>
              <el-table-column label="所属案场名称" prop="case_name" align="center"></el-table-column>
              <el-table-column label="api编号" prop="api_code" align="center"></el-table-column>
              <el-table-column label="api类型" prop="api_type" align="center"></el-table-column>
              <el-table-column label="描述" prop="pos_info" align="center"></el-table-column>
              <el-table-column label="table_code" prop="table_code" align="center"></el-table-column>
              <el-table-column label="是否绑定案场" prop="is_bind_case" align="center" width="120px">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.is_bind_case == 1" size="mini" type="success">是</el-tag>
                  <el-tag v-else size="mini" type="danger">否</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="设备在线状态" prop="isOnlineName" align="center" width="120px">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.is_online == 1" size="mini" type="success">在线</el-tag>
                  <el-tag v-else size="mini" type="danger">离线</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="最后数据时间" prop="last_data_time" align="center">
              <template slot-scope="scope">
                {{getTime(scope.row.last_data_time)}}
              </template>
            </el-table-column>
            <el-table-column label="最后活跃时间" prop="last_active_time" align="center">
              <template slot-scope="scope">
                {{getTime(scope.row.last_active_time)}}
              </template>
            </el-table-column>
            </el-table>
            <div class="data-block" style="margin-bottom: 20px;">
              <el-pagination
                background
                style="float: right;"

                @current-change="posCurrentChange"
                @size-change="posDeviceSizeChange"
                :page-sizes="posDeviceZoneData.pageSizes"
                :page-size="posDeviceZoneData.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="posDeviceZoneData.total"
                :current-page.sync="posDeviceZoneData.currentPage"
                v-if="posDeviceZoneData.total != 0">
              </el-pagination>
              <div style="clear: both"></div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="posDeviceZoneData.dialogTableVisible = false" size="mini">取 消</el-button>
              <el-button type="primary" @click="selectedPosDeviceData()"  size="mini">确 定</el-button>
            </span>
          </el-dialog>
        </el-dialog>

        <!-- 一级模态绑定人脸 -->
        <el-dialog v-dialogDrag title="绑定人脸设备" :visible.sync="isShowFace" @opened="editVisibleOpenedFace" @close="FaceCloseDialog"
                   :modal-append-to-body="false" :close-on-click-modal="false" width="1280px">
            <el-button 
              @click="openFaceDeviceZone" size="small" type="primary">选择人脸设备监测点</el-button>
            <span style="margin-left: 20px;color:#9ea4ff;">已选择人脸设备检测点个数：<span style="color:#545deb;font-weight:700;">{{area_face.device_list.length}}</span></span>
            <div class="headNamediv">
              <span><span style="color:#9ea4ff;font-weight:400;">当前选择：</span>案场:{{ruleForm.case_info_name}}</span>
              <span style="margin-left:20px">区域:{{ruleForm.area_name}}</span>
            </div>
            <br>
          <el-table id="isFaceChoiceTable" class="data-table" :row-key="getRowKeys" style="margin:10px 0px;width:100%"
                  :data.sync="area_face.device_list" height="300" size="mini"   stripe>
            <el-table-column align="center" class-name="allowDrag" width="80px">
              <template slot="header" :slot-scope="'slot'">
                <el-popover placement="right-start" title="说明:" width="200" trigger="hover"
                            content="拖拽进行排序">
                  <i slot="reference" class="el-icon-question"></i>
                </el-popover>
              </template>
              <template slot-scope="scope">
                <i slot="reference" class="el-icon-sort"></i>
                {{scope.row.sort_number}}
              </template>
            </el-table-column>

            <el-table-column label="设备编号/子编号" prop="device_code" align="center" sortable>
              <template slot-scope="scope">
                <p>编号：{{scope.row.device_code}}</p>
                <p>子编号：{{scope.row.sub_code}}</p>
              </template>
            </el-table-column>
            <el-table-column label="设备名称" prop="device_name" align="center" width="120px" sortable></el-table-column>
            <el-table-column label="设备位置" prop="device_position" align="center" sortable></el-table-column>
            <el-table-column label="设备类型" prop="model_number" align="center" sortable></el-table-column>
            <el-table-column property="" label="设备子类型" align="center" min-width="140px">
              <template slot-scope="scope">
                <el-select v-model="scope.row.zone_maker" size="mini" @change="zoneMakerChange(scope.row,scope.$index)">
                  <template  v-for="item in facedeviceZoneData.zoneTypeList">
                    <el-option v-if="scope.row.zone_type == item.type"
                               :key="item.maker"
                               :label="item.zh_name"
                               :value="item.maker"
                    >
                    </el-option>
                  </template>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="最后数据时间/最后活跃时间" align="center" sortable>
              <template slot-scope="scope">
                <p>数据时间:{{getTime(scope.row.last_data_time)}}</p>
                <p>活跃时间:{{getTime(scope.row.last_active_time)}}</p>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100px" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="FacedelDevice(scope.$index)">解除绑定</el-button>
              </template>
            </el-table-column>
          </el-table>
<!--          二级模态框-选择人脸设备-->
          <el-dialog v-dialogDrag title="选择人脸设备" :visible.sync="facedeviceZoneData.dialogTableVisible"
                     @close="FacecloseMonitorList" top="20px"
                     width="70%" append-to-body
                     :close-on-click-modal="false">
            <el-form :inline="true" label-width="100px">
              <el-form-item label="设备编号/设备子编号:" label-width="190px">
                <el-input v-model="facedeviceZoneData.keywords" clearable placeholder="请输入内容" size="mini"
                          style="width:300px;vertical-align: middle;">
                  <el-button @click="FaceisChange" type="primary" slot="append" icon="el-icon-search"
                             size="small"></el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="设备类型:">
                <el-select @change="FaceisChange" style="width: 140px;" v-model="facedeviceZoneData.zoneType" size="mini">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="Face" value="9"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否挂载:">
                <el-radio-group v-model="facedeviceZoneData.search_type" @change="FaceisChange"  size="mini">
                  <el-radio label="1">定向搜索</el-radio>
                  <el-radio v-if="buttonPermissions.isFaceUnmounted" label="2">未挂载任何案场</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <el-table :data="facedeviceZoneData.device_datas" ref="Facetable"
                      @selection-change="FacehandleSelectionChange"
                      stripe style="width: 100%" height="400"
                      class="data-table" size="mini">
              <el-table-column type="selection" :selectable="FacecheckSelectable" :disabled="true"></el-table-column>
              <el-table-column prop="device_code" label="设备编号" align="center" width="100px"></el-table-column>
              <el-table-column prop="case_info_name" label="所属案场" align="center" width="100px">
                <template slot-scope="scope">
                  {{scope.row.is_bind_case == 1?scope.row.case_info_name:''}}
                  <el-tag v-if="scope.row.is_bind_case != 1" size="mini" type="warning">未挂载</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="device_code" label="设备编号/子编号" align="center">
                <template slot-scope="scope">
                  <p>编号：{{scope.row.device_code}}</p>
                  <p>子编号：{{scope.row.sub_code}}</p>
                </template>
              </el-table-column>
              <el-table-column label="设备名称" prop="device_name" align="center" sortable></el-table-column>
              <el-table-column label="设备位置" prop="device_position" align="center" sortable></el-table-column>
              <el-table-column label="最后数据时间/最后活跃时间" align="center">
                <template slot-scope="scope">
                  <p>数据时间:{{getTime(scope.row.last_data_time)}}</p>
                  <p>活跃时间:{{getTime(scope.row.last_active_time)}}</p>
                </template>
              </el-table-column>
            </el-table>
            <div class="data-block" style="margin-bottom: 20px;">
              <el-pagination background style="float: right;"
                 :page-size="facedeviceZoneData.pageSize"
                             @current-change="FacedeviceZoneDataCurrentChange"
                             @size-change='FacedeviceZoneDataSizeChange'
                             :current-page="facedeviceZoneData.currentPage"
                             :page-sizes="facedeviceZoneData.pageSizes"
                             :total="facedeviceZoneData.total"
                             layout="total, sizes, prev, pager, next">
              </el-pagination>
              <div style="clear: both"></div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="facedeviceZoneData.dialogTableVisible = false" size="mini">取 消</el-button>
              <el-button type="primary" @click="FacehandleAddData()" size="mini">确 定</el-button>
            </span>
          </el-dialog>
          <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="isShowFace = false" size="small">取 消</el-button>
            <el-button type="primary" @click="FaceConfirmDialog"  size="small">保 存</el-button>
          </div>
        </el-dialog>

        <!-- 一级模态绑定客流 -->
        <el-dialog v-dialogDrag title="绑定客流设备" :visible.sync="isShowPassFlow" @opened="editVisibleOpenedPassFlow"  @close="PassFlowCloseDialog"
                   :modal-append-to-body="false" :close-on-click-modal="false" width="1280px">
          <div class="jsmode">
            <span>计算方式：</span>
              <el-checkbox-group  v-model="algorithmCheckeds" @change="changeAlgo">
                <el-checkbox border size="small" style=''
                             v-for="algo in algorithmList"
                             :label="algo.id"
                             :key="algo.id"
                             :value="algo.id" >
                  {{algo.name}}
                  <el-tooltip placement="top" v-if="algo.info" >
                    <div slot="content" style="width: 200px" v-html="algo.info"></div>
                    <i  class='el-icon-question'></i>
                  </el-tooltip>
                </el-checkbox>
              </el-checkbox-group>
          </div>
          <el-button   @click="openSelectDeviceZone" size="small" type="primary">选择设备监测点</el-button>
          <span style="margin-left: 20px">已选择设备检测点个数：{{areaData.zone_list.length}}</span>
          <div class="headNamediv">
              <span><span style="color:#9ea4ff;font-weight:400;">当前选择：</span>案场:{{ruleForm.case_info_name}}</span>
              <span style="margin-left:20px">区域:{{ruleForm.area_name}}</span>
            </div>
          <br>
          <!--已经选择的设备数据-->
          <el-table id="isChoiceTable" class="data-table" :row-key="getRowKeys" style="margin:10px 0px;width:100%;"
                    :data.sync="areaData.zone_list" height="300" size="mini"   stripe>
            <el-table-column align="center" class-name="allowDrag" width="80px">
              <template slot="header" :slot-scope="'slot'">
                <el-popover placement="right-start" title="说明:" width="200" trigger="hover"
                            content="拖拽进行排序">
                  <i slot="reference" class="el-icon-question"></i>
                </el-popover>
              </template>
              <template slot-scope="scope">
                <i slot="reference" class="el-icon-sort"></i>
                {{scope.row.sort_number}}
              </template>
            </el-table-column>
            <el-table-column property="device_code" label="设备编号" align="center" min-width="100px"></el-table-column>
            <el-table-column property="zone_code" label="照射区域编号" align="center" min-width="100px"></el-table-column>
            <el-table-column property="zone_sn" label="照射区域ID" align="center" min-width="100px"></el-table-column>
            <el-table-column property="zone_type" label="照射区域类型" align="center" width="100px">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.zone_type == 0" size="mini" type="primary">COUNTING</el-tag>
                <el-tag v-else-if="scope.row.zone_type == 1" size="mini" type="primary">QUEUE</el-tag>
                <el-tag v-else-if="scope.row.zone_type == 4" size="mini" type="primary">SERVICE</el-tag>
              </template>
            </el-table-column>
            <el-table-column property="" label="照射区域子类型" align="center" width="140px">
              <template slot-scope="scope">
                <el-select v-model="scope.row.zone_maker" size="mini" @change="zoneMakerChange(scope.row,scope.$index)">
                  <template  v-for="item in deviceZoneData.zoneTypeList">
                    <el-option v-if="scope.row.zone_type == item.type"
                               :key="item.maker"
                               :label="item.zh_name"
                               :value="item.maker"
                               >
                    </el-option>
                  </template>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column property="zone_type" label="是否在线" align="center" width="100px">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.is_online == 1" size="mini" type="success">在线</el-tag>
                <el-tag v-else size="mini" type="danger">离线</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="最后数据时间" prop="last_data_time" align="center" width="92px">
              <template slot-scope="scope">
                {{getTime(scope.row.last_data_time)}}
              </template>
            </el-table-column>
            <el-table-column label="最后活跃时间" prop="last_active_time" align="center" width="92px">
              <template slot-scope="scope">
                {{getTime(scope.row.last_active_time)}}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100px" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="delDevice(scope.$index)">解除绑定</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="isShowPassFlow = false" size="small">取 消</el-button>
            <el-button type="primary" @click="PassFlowConfirmDialog"  size="small">保 存</el-button>
          </div>
          <!--选择监测设备-->
          <el-dialog v-dialogDrag title="选择监测设备" :visible.sync="deviceZoneData.dialogTableVisible"
                     @close="closeMonitorList" top="20px"
                     width="70%" append-to-body
                     :close-on-click-modal=false>
            <el-form :inline="true" label-width="100px">
              <el-form-item label="设备编号/设备照射区域编号:" label-width="190px">
                <el-input v-model="deviceZoneData.keywords" clearable placeholder="请输入内容" size="mini"
                          style="width:300px;vertical-align: middle;">
                  <el-button @click="isChange" type="primary" slot="append" icon="el-icon-search"
                             size="small"></el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="是否在线:">
                <el-select @change="isChange" style="width: 100px;" v-model="deviceZoneData.is_online" size="mini">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="在线" value="1"></el-option>
                  <el-option label="离线" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="区域类型:">
                <el-select @change="isChange" style="width: 140px;" v-model="deviceZoneData.zoneType" size="mini">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="COUNTING" value="0"></el-option>
                  <el-option label="QUEUE" value="1"></el-option>
                  <el-option label="SERVICE" value="4"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否挂载:">
                <el-radio-group v-model="deviceZoneData.search_type" @change="isChange"  size="mini">
                  <el-radio label="1">定向搜索</el-radio>
                  <el-radio v-if="buttonPermissions.isUnmounted" label="2">未挂载任何案场</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <el-table :data="deviceZoneData.device_datas" ref="table"
                       @selection-change="handleSelectionChange"
                      stripe  style="width: 100%" height="400"
                      class="data-table" size="mini">
              <el-table-column type="selection" :selectable="checkSelectable"  :disabled="true" ></el-table-column>
              <el-table-column prop="device_code" label="设备编号" align="center"></el-table-column>
              <el-table-column prop="case_info_name" label="照射区域所属案场" align="center">
                  <template slot-scope="scope">
                    {{scope.row.is_bind_case == 1?scope.row.case_info_name:''}}
                    <el-tag v-if="scope.row.is_bind_case != 1" size="mini" type="warning">未挂载</el-tag>
                  </template>
              </el-table-column>
              <el-table-column prop="zone_code" label="照射区域编号" align="center"></el-table-column>
              <el-table-column prop="zone_sn" label="照射区域ID" align="center"></el-table-column>
              <el-table-column prop="zone_type" label="照射区域类型" align="center">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.zone_type == 0" size="mini" type="primary">COUNTING</el-tag>
                  <el-tag v-else-if="scope.row.zone_type == 1" size="mini" type="primary">QUEUE</el-tag>
                  <el-tag v-else-if="scope.row.zone_type == 4" size="mini" type="primary">SERVICE</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="zone_type" label="是否在线" align="center" width="100px">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.is_online == 1" size="mini" type="success">在线</el-tag>
                  <el-tag v-else size="mini" type="danger">离线</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="最后数据时间" prop="last_data_time" align="center">
              <template slot-scope="scope">
                {{getTime(scope.row.last_data_time)}}
              </template>
            </el-table-column>
            <el-table-column label="最后活跃时间" prop="last_active_time" align="center">
              <template slot-scope="scope">
                {{getTime(scope.row.last_active_time)}}
              </template>
            </el-table-column>
              <!-- <el-table-column prop="is_bind_case" label="是否挂载" width="80px" align="center">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.is_bind_case != 1" size="mini" type="success">未挂载</el-tag>
                  <el-tag v-if="scope.row.is_bind_case == 1" size="mini" type="danger">已挂载</el-tag>
                </template>
              </el-table-column> -->
            </el-table>
            <div class="data-block" style="margin-bottom: 20px;">
              <el-pagination background style="float: right;"
                 :page-size="deviceZoneData.pageSize"
                             @current-change="deviceZoneDataCurrentChange"
                             @size-change='deviceZoneDataSizeChange'
                             :current-page="deviceZoneData.currentPage"
                             :page-sizes="deviceZoneData.pageSizes"
                             :total="deviceZoneData.total"
                             layout="total, sizes, prev, pager, next">
              </el-pagination>
              <div style="clear: both"></div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="deviceZoneData.dialogTableVisible = false" size="mini">取 消</el-button>
              <el-button type="primary" @click="handleAddData()" size="mini">确 定</el-button>
            </span>
          </el-dialog>
        </el-dialog>

      </div>
    </page>
  </el-row>
</template>
<style lang="scss">
  .yysj{
    .el-dialog{
        .el-dialog__body{
          .el-table{
            .el-table__body-wrapper{
              .el-table__body{
                .el-table__row{
                  cursor: pointer;
                  &.current-row{
                    .is-center{
                      &:first-child{
                        &::after{
                          border: 2px solid #6689f1;
                        }
                        &::before{
                          content: '';
                          display: block;
                          width:6px;
                          height: 6px;
                          border-radius: 50%;
                          background:#6689f1;
                          position: absolute;
                          top:50%;
                          transform: translateY(-50%);
                          left:24px;

                        }
                      }
                    }
                  }
                  .is-center{
                     &:first-child{
                      position: relative;
                      &::after{
                        content: '';
                        display: block;
                        width:10px;
                        height:10px;
                        border: 2px solid #ccc;
                        border-radius:50%;
                        position: absolute;
                        left:20px;
                        top:50%;
                        transform: translateY(-50%);
                      }
                    }
                  }
                }
              }
            }
          }
        }

    }
  }
  .quyutable{
    .el-table__body-wrapper{
        tbody{
          .el-table__row{
            td{
              .cell{
                .el-button + .el-button{
                  margin-left:5px;
                }
                .el-button{
                  &.databtn{
                    &.yibangding{
                      color: #545deb;
                      border-color: #cccef9;
                      background-color: #eeeffd;
                    }
                    &:hover{
                      color: #fff;
                      background-color: #545deb;
                      >span{
                        span{
                          color:#fff;
                        }
                      }
                    }
                    width:90px;
                  }
                  >span{
                    span{
                      
                      margin-left:5px;
                      color:#545deb;
                    }
                  }
                }
              }
            }
          }
        }
    }
  }
  .jsmode{
    >span{
      vertical-align: top;
      line-height: 40px;
    }
    .el-checkbox-group{
      width:90%;
      position: relative;
      display:inline-block;
      left:-10px;
      .el-checkbox{
        margin:5px 10px 10px 10px;
      }
    }
  }
  .headNamediv{
    display:inline-block;
    margin-left:24px;
    span{
      color:#545deb;
      font-size:15px;
      font-weight: 700;
    }
  }
  .page-content {
    padding: 15px;
    .fr {
      float: right;
    }
    .el-table {
      margin-bottom: 10px;
    }
    .paging {
      margin: 15px;
      height: 28px;
    }
  }
  .onClickDiv{
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    cursor: pointer;
  }
  .xialadiv{
    height:62px;
    transition:all 0.5s;
    .el-form-item{
      opacity:1;
      transition: all 0.5s;
    }
    &.xxyc{
      height:0;
      .el-form-item{
        opacity:0 ;
      }
    }
  }
</style>
<script>
import page from "@/components/page/page";
import pageheader from "@/components/page/pageheader";
import TreeTable from "@/components/sys/assembly/treeTable";
import SearchInput from "@/components/sys/assembly/searchinput";
import Transfer from "@/components/sys/assembly/transfer";
import Cascader from "@/components/sys/assembly/elcascader";
import Sortable from 'sortablejs'

export default {
  data() {
    let validateAreaName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入区域名称'));
      } else {
        let str =  /[`~!@#$%^&*\+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*\+={}|《》？：“”【】、；‘’，。、]/im;
        if(str.test(value)){
          return callback(new Error('区域名称不得使用特殊符号！'));
        }
        if(value.length >=30){
          return callback(new Error('区域名称长度不能超过30个字！'));
        }
        callback();
      }
    };
    return {
      pageTitle: "区域信息管理",
      caozuoWidth:0,  //表格操作列宽度根据权限按钮走
      isShow: false,//是否显示模态框
      showTransfer: false,//是否显示穿梭框模态框
      dataTable:[],//表格数据
      region:{
        name:'',
        nameArr:[],
        options:[],
        props:{
          value: 'value',
          label: 'name',
          children: 'children',
          expandTrigger: 'hover',
          checkStrictly:'true',
          emitPath:'false'
        },
      },//选择区域
      keywords:'',//搜索查询
      pagination:{
        total:0,//总条目数
        currentPage:1,//当前页数
        pageSize:10,//每页显示条目个数
        pageSizes:[10,20,50,100],//每页显示个数选择器的选项设置
      },//表格分页参数
      ls_tags_arr:[],   //临时tags数组
      tagsIsShow:false,  //tags选择模态框
      ruleForm: {
        area_name: '',//区域名称
        company_id_arr: '',//选择企业id数组
        company_id: '',//选择企业id
        case_info_id: '',//案场id
        length: '',//区域长度
        width:'',//区域宽度
        square_meters:'',//区域面积
        area_desc:'',//区域描述
        tags:'',//标签id列表
        tags_name:'',//标签名称列表
        tags_arr:[],//标签id列表
        areaType:[],//区域标签选择
        table_code:'',//案场table_code
        opening_hours_id:'',//营业时间id
        opening_hours_name:'',//营业时间名称
      },//模态框form表单
      rules: {
        area_name: [{ required: true, validator:validateAreaName, trigger: "blur" }],
        company_id_arr: [{ required: true, message: "请选择所属企业",trigger:'change'}],
        case_info_id : [{ required: true, message: "请选择案场",trigger:'change'}],
        areaType : [{ required: true, message: "请选择区域标签",trigger:'change'}],
      },//form表单验证
      areaOption:[],//区域标签选择列表
      companyOptions:[],//企业树数据
      caseInfoOptions:[],//案场列表数据
      parentOptions:[],//父级区域列表数据
      transferData:[],//穿梭框data参数

      showMountDevice:false,//是否显示挂载设备模态框
      area_id:'',//保存后生成的区域id
      indicator:[],//获取的数据指标和对应的计算方式

      used_algo:[],
      algorithmList:[],//计算方法列表
      algorithmCheckeds:[],//选中的算法列表
      HeadName:{        //模态框头部信息 案场名-区域名
          caseName:'',
          areaName:'',
      },
      showOpening:false,//是否显示营业时间模态框
      openingDataTable:[],//营业时间列表
      showOpeningContent:false,//是否显示营业时间详情模态框
      openingContent:{
        name:'',
        info:'',
        item_list:[],
      },//营业时间详情

      showMonitorList:false,
      deviceZoneData:{
        dialogTableVisible: false,
        multipleSelectionAll: [], // 所有选中的数据包含跨页数据
        multipleSelection: [], // 当前页选中的数据
        device_datas: [], // 表格数据
        idKey:'id', //标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
        keywords:'',//搜索关键字
        is_online:'',//是否在线
        search_type:'1',//选择是否挂载
        zoneTypeList:[],//区域类型子类型列表
        zoneType:"",//区域类型

        total: 0, //总条数
        pageSize: 10, //每页显示条数
        pageSizes: [10, 20, 50],
        currentPage: 1,
      },

      facedeviceZoneData:{
        dialogTableVisible: false,
        multipleSelectionAll: [], // 所有选中的数据包含跨页数据
        multipleSelection: [], // 当前页选中的数据
        device_datas: [], // 表格数据
        idKey:'id', //标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
        keywords:'',//搜索关键字
        is_online:'',//是否在线
        search_type:'1',//选择是否挂载
        zoneTypeList:[],//区域类型子类型列表
        zoneType:"",//区域类型
        total: 0, //总条数
        pageSize: 10, //每页显示条数
        pageSizes: [10, 20, 50],
        currentPage: 1,
      },
      isShowPassFlow:false,
      // 区域信息数据
      areaData:{
        zone_list:[],
      },

      isShowFace:false,
      //人脸信息
      area_face:{
        device_list:[],
      },
      showMountButton:true,//是否显示继续挂载设备按钮

      isDisabled:false,//是否是修改状态
      buttonPermissions:{
        isAdd:false,
        isDel:false,
        isModify:false,
        isFaceModify:false,
        isWatch:false,
        isBind:false,
        isUnmounted:false,
        isPosUnmounted:false,
        isFaceUnmounted:false,
      },

      isShowPos:false,
      posDeviceZoneData:{
        case_info_id:'',//选择的案场id
        area_id:'',//区域id
        dialogTableVisible:false,//是否显示pos设备
        multipleSelection:[],
        multipleSelectionAll:[],
        keywords:'',
        is_online:'',
        search_type:'1',
        device_datas:[],
        pageSizes:[10,20,50,100],
        pageSize:10,
        total:0,
        currentPage:1,
        zone_list:[],
        idKey:'id'
      },
      // 区域信息数据
      posData:{
        zone_list:[],
      },
      changeHandler:false,
      xxyc:false,
    };
  },
  inject: ["reload"],
  components: {
    page,
    pageheader,
    TreeTable,//表格组件
    SearchInput,//搜索框组件
    Transfer,//穿梭框组件
    Cascader//级联选择器组件
  },
  created() {
    //初始化获取第一个选择区域
    this.getNodes();
    this.getTagsList();
    this.getCompanyTree();
    this.getIndicator();
    this.getZoneTypeList();

    //判断是否有按钮权限
    if(sessionStorage.buttonPermissions){
      this.configPermissions(JSON.parse(sessionStorage.buttonPermissions))
    }
  },
  mounted() {
    //点击新增按钮
    this.$Bus.$on("physPopUp", () => {  
      this.ruleForm.area_name= '',//区域名称
      this.ruleForm.company_id_arr= '',//选择企业id数组
      this.ruleForm.company_id= '',//选择企业id
      this.ruleForm.case_info_id= '',//案场id
      this.ruleForm.length= '',//区域长度
      this.ruleForm.width='',//区域宽度
      this.ruleForm.square_meters='',//区域面积
      this.ruleForm.area_desc='',//区域描述
      this.ruleForm.tags='',//标签id列表
      this.ruleForm.tags_name='',//标签名称列表
      this.ruleForm.tags_arr=[],//标签id列表
      this.ruleForm.areaType=[1],//区域标签选择
      this.ruleForm.table_code='',//案场table_code
      this.ruleForm.opening_hours_id='',//营业时间id
      this.ruleForm.opening_hours_name='',//营业时间名称
      this.areaData.zone_list = [];
      this.area_face.device_list = [];
      this.caseInfoOptions = [];
      this.openingDataTable = [];
      this.algorithmCheckeds = [];
      this.$set(this.ruleForm,'tags_arr',[])//清空标签id列表
      this.$nextTick(()=>{
        this.xxyc=false;
        this.isShow = true;
        this.isDisabled = false;
      })
    });
    //选择所属企业change事件
    this.$Bus.$on('companyChange',data =>{
      this.ruleForm.company_id_arr = data
      this.ruleForm.company_id = data.slice(-1)[0]
      this.$refs.ruleForm.validateField('company_id_arr')//触发form表单中校验所属企业是否选择
      this.ruleForm.case_info_id = '';//清空案场
      this.ruleForm.table_code = ''
      this.ruleForm.opening_hours_id = ''
      this.ruleForm.opening_hours_name = ''
      this.caseInfoOptions = [];
      this.$Bus.$emit('Loading',true)
      this.getOpeningList(data.slice(-1)[0])
      this.getCaseInfo(this.ruleForm.company_id)//获取案场列表
    });
  },
  beforeDestroy(){
    //销毁Bus绑定事件
    this.$Bus.$off("physPopUp")
    this.$Bus.$off("companyChange")
  },
  computed:{
  },
  methods: {
    //表格序号显示方法
    indexMethod(index){
      return index + ((this.pagination.currentPage - 1) * this.pagination.pageSize) + 1
    },
    //配置按钮权限，根据权限不同调整表头渲染参数
    configPermissions(val){
      let buttonPermissions = val
      let menuButtonPermissions = [];//按钮权限数组
      buttonPermissions.forEach(e =>{
        for(let key in e){
          if(key == 'menu_code'){
            menuButtonPermissions.push(e[key])
          }
        }
      });
      this.buttonPermissions.isAdd = menuButtonPermissions.includes('phyAdd') ? true : false; //是否有新增权限
      this.buttonPermissions.isBind = menuButtonPermissions.includes('phyBind') ? true : false; //是否有绑定权限
      this.buttonPermissions.isDel = menuButtonPermissions.includes('phyDelete') ? true : false; //是否有删除权限
      this.buttonPermissions.isWatch = menuButtonPermissions.includes('phyWatch') ? true : false; //是否有查看权限
      this.buttonPermissions.isModify = menuButtonPermissions.includes('phyModify') ? true : false; //是否有修改权限
      this.buttonPermissions.isFaceModify = menuButtonPermissions.includes('phyFaceModify') ? true : false; //是否有人脸修改权限
      this.buttonPermissions.phyPassFlowModify = menuButtonPermissions.includes('phyPassFlowModify') ? true : false; //是否有客流修改权限
      this.buttonPermissions.isUnmounted = menuButtonPermissions.includes('isPhyUnmounted') ? true : false; //是否有选择未挂载设备的权限
      this.buttonPermissions.isFaceUnmounted = menuButtonPermissions.includes('isFacePhyUnmounted') ? true : false; //是否有人脸选择未挂载设备的权限
      this.buttonPermissions.isPosUnmounted = menuButtonPermissions.includes('isPosUnmounted') ? true : false; //是否有pos选择未挂载设备的权限
      let a=this.buttonPermissions.phyPassFlowModify?1:0;
      a+=this.buttonPermissions.isFaceModify?1:0;
      a+=this.buttonPermissions.isPosUnmounted?1:0;
      this.caozuoWidth=a*90;
    },
    //初始化获取第一个选择区域
    getNodes(){
      let url = '/sys/org_auth/nodes'
      this.$api.get(url)
      .then(data=>{
        // console.log(data);
        if(data){
          data.data.forEach(x=>{
            x.children = [];
            x.value = x.foreign_key + '-' + x.org_type
          })
          this.region.options = data.data
          this.region.nameArr.push(data.data[0].value)
          this.lazy(Array.of(data.data[0].value))
          this.getAreaInOf(data.data[0].value)
        }else{
          this.$Bus.$emit('Loading',false)
        }
      })
      .catch(err=>{
         console.log(err);
        this.$Bus.$emit('Loading',false)
      })
    },
    //获取标签列表
    getTagsList(){
      let url = '/sys/tags/list'
      this.$api.get(url)
      .then(data=>{
        // console.log(data);
        if(data){
          let list = data.data
          let tagList = [];
          let areaList = [];
          if(list.length){
            for(let i in list){
              list[i].key = list[i].id;
              list[i].label = list[i].name;
              if(list[i].type == 1){
                areaList.push(list[i])
              }else{
                tagList.push(list[i])
              }
            }
            this.transferData = tagList
            this.areaOption = areaList
            this.ruleForm.areaType.push(areaList[0].key)
          }
        }
      })
      .catch(err=>{
         console.log(err);
        this.transferData = []
      })
    },
    //获取企业树
    getCompanyTree(){
      let url = '/sys/report_assist_new/company_tree'
      this.$api.get(url)
      .then(data=>{
        // console.log(data);
        if(data){
          recursion(data.data);
          function recursion(val) {
            if(val.length){
              for(let i in val){
                val[i].value = val[i].id;
                val[i].label = val[i].company_name;
                val[i].parent_id_str =val[i].parent_name_list==null?'':val[i].parent_name_list.join('/');
                if(val[i].children && val[i].children.length){
                  recursion(val[i].children)
                }else{
                  delete val[i].children
                }
              }
            }
          }
          this.companyOptions = data.data;
        }
      })
      .catch(err=>{
         console.log(err);
        this.companyOptions = [];
      })
    },
    //获取案场列表
    getCaseInfo(id){
      let url = '/sys/report_assist_new/case_list';
      let parmas={
        org_id_list:Array.of(id),
        org_type:1
      }
      this.$api.post(url,parmas)
      .then(data => {
        // console.log(data);
        //判断接口返回正常
        if(data){
          this.caseInfoOptions = data.data
        }
        this.$Bus.$emit('Loading',false)
      })
      .catch(err=>{
         console.log(err);
        this.caseInfoOptions = []
        this.$Bus.$emit('Loading',false)
      })
    },
    //获取计算方式列表
    getIndicator(){
      let url = '/indicator/indicator_calc'
      this.$api.get(url)
      .then(data=>{
        // console.log(data);
        if(data){
          this.algorithmList = data.data
        }
      })
    },
    //获取照射区域子类型
    getZoneTypeList(){
      let url = '/sys/device_zone/zone_type_list'
      this.$api.get(url)
      .then(data=>{
        if(data == '10001'){
          this.$message.error('无权操作该数据')
          this.$Bus.$emit('Loading',false);
          return
        }
        // console.log(data);
        if(data){
          this.deviceZoneData.zoneTypeList = data.data
          this.facedeviceZoneData.zoneTypeList=data.data;
        }
      })
    },
    //调用区域列表查询接口
    getAreaInOf(value,page = 1,page_size = 10 ,keywords = ''){
      let url = '/sys/area-info/list?org_fk='+ value.split('-')[0] + '&org_type=' + value.split('-')[1] +
        '&page=' + page + '&page_size=' + page_size + '&keywords=' + encodeURIComponent(keywords)
      this.$api.get(url)
      .then(data =>{
        if(data == '10001'){
          this.$message.error('无权操作该数据')
          this.$Bus.$emit('Loading',false);
          return
        }
        if(data){
          let _data = data.data;
          _data.dataList = _data.dataList.map(x=>{
            x.parent_name = x.parent_name_list ? x.parent_name_list.slice(-1)[0] : ''
            return x
          });
          for(let i in _data.dataList)
          {
            let tags_name='';
            for(let j in _data.dataList[i].tag_list)
            {
              tags_name+=_data.dataList[i].tag_list[j].name+',';
            }
            _data.dataList[i].tag_list=tags_name;
          }
          this.dataTable = _data.dataList ? _data.dataList : [];
          this.pagination.total = _data.dataCount;
          this.pagination.currentPage = _data.pageCode;
          this.pagination.pageSize = _data.pageSize;
        }else{
          this.dataTable = []
        }
        this.$Bus.$emit('Loading',false)
      })
      .catch(err=>{
         console.log(err);
        this.dataTable = []
        this.$Bus.$emit('Loading',false)
      })
    },

    handleItemChange(val){
      // console.log(this.OrgVoAuth,'OrgVoAuth');
      //先根据选中的id数组来找总data数据，判断所点击的选项是否加载过子集，
      // 如果没加载过再请求懒加载的接口，并且把获取的数据添加的总data数据上。
      let selectedData = recursionOrgVoAuth(this.region.options,0);
      function recursionOrgVoAuth(list,n) {
        if(n === val.length) return list;
        for (let i = 0; i <= list.length; i++) {
          if (val[n] === list[i].value) {
            return list[i].children ? recursionOrgVoAuth(list[i].children,++n) : [];
          }
        }
      }
      // console.log(selectedData,'selectedData');

      if(selectedData.length == 0){
        this.lazy(val)
      }
    },
    //选择区域关闭
    visibleChange(val){
      if(!val){
        this.$nextTick(()=>{
          this.getAreaInOf(this.region.nameArr[this.region.nameArr.length-1],1,this.pagination.pageSize,this.keywords)
        })
      }
    },
    lazy(val){
      // console.log(val);
      let id = val[val.length-1].split('-')[0];
      let type = val[val.length-1].split('-')[1];
      let url = '/sys/org_auth/nodes?foreign_key='+ id +'&org_type=' + type;
      this.$api.get(url)
      .then(data=>{
        if(data == '10001'){
          this.$message.error('无权操作该数据')
          this.$Bus.$emit('Loading',false);
          return
        }
        if(data){
          // console.log(data.data,'data');
          data.data.forEach(x =>{
            x.children = [];
            x.value = x.foreign_key + '-' + x.org_type
          });
          //递归OrgVoAuth，找出选中的子级赋值
          recursionData(this.region.options,0);
          function recursionData(list,n) {
            // console.log(list,'list');
            // console.log(n,'n');
            if(n === val.length) {
              return list.push(...data.data)
            }else{
              for (let i = 0; i <= list.length; i++) {
                if (val[n] === list[i].value) {
                  //当data数据为空的时候停止递归函数，并删除子级的children
                  if(n === (val.length -1) && data.data.length === 0){
                    // console.log('delete');
                    // console.log(this.$set);
                    delete list[i].children
                    return
                  }else{
                    return recursionData(list[i].children,n+1)
                  }
                }
              }
            }
          }
        }
      })
    },
    //每页显示条目个数change事件
    sizeChange(val){
      this.$Bus.$emit('Loading',true)
      this.getAreaInOf(this.region.nameArr[this.region.nameArr.length-1],this.pagination.currentPage,val,this.keywords)
    },
    //分页change事件
    currentChange(val){
      this.$Bus.$emit('Loading',true)
      this.pagination.currentPage=val;
      this.getAreaInOf(this.region.nameArr[this.region.nameArr.length-1],this.pagination.currentPage,this.pagination.pageSize,this.keywords)
    },
    //搜索按钮点击事件
    physSearch(data) {
      this.$Bus.$emit('Loading',true)
      this.keywords = data
      this.getAreaInOf(this.region.nameArr[this.region.nameArr.length-1],1,this.pagination.pageSize,data)
    },
    //关闭模态框
    closeDialog(formName){
      this.ruleForm.id = '';
      this.ruleForm.company_id = '';
      this.ruleForm.case_info_id = '';
      this.ruleForm.opening_hours_id = ''
      this.ruleForm.opening_hours_name = ''
      this.caseInfoOptions = [];
      this.openingDataTable = [];
      this.algorithmCheckeds = [];
      this.$set(this.ruleForm,'tags_arr',[])//清空标签id列表
      this.$refs[formName].resetFields();
      this.$Bus.$emit('Loading',false)
    },
    //穿梭框change事件,存一个变量
    transferChange(val){
      this.ls_tags_arr = val
    },
    opentagsDialog(){
        this.ls_tags_arr=this.ruleForm.tags_arr;
        this.tagsIsShow=true;
        this.showTransfer=true;
    },
    //关闭修改标签
    tagsClose(){
      this.tagsIsShow=false;
    },
    //保存修改标签，将transferArr转换成
    confirmTransfer(){
      let list = this.transferData;
      let val = this.ls_tags_arr;
      // console.log(list,'list');
      // console.log(val,'val');
      this.ruleForm.tags = val.join(',')
      this.ruleForm.tags_name = ''
      for(let i in list){
        for(let ii in val){
          if(val[ii] == list[i].id){
            if(this.ruleForm.tags_name == ''){
              this.ruleForm.tags_name += list[i].name
            }else{
              this.ruleForm.tags_name += ',' + list[i].name
            }
          }
        }
      }
      this.ruleForm.tags_arr=this.ls_tags_arr;
      this.showTransfer = false;
    },
    //删除区域信息
    phyDel(data){
      this.$confirm("是否删除‘"+ data.area_name +"’？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
      .then(() => {
        this.$Bus.$emit('Loading',true)
        this.delData(data.id);
      })
      .catch(()=>{})
    },
    //删除接口
    delData(id) {
      let url = "/sys/area-info/delete";
      let data = {
        area_id:id
      }
      this.$api.delete(url,data)
      .then(data => {
        if(data == '10001'){
          this.$message.error('无权操作该数据')
          this.$Bus.$emit('Loading',false);
          return
        }
        this.$Bus.$emit('Loading',true)
        if(data){
          this.getAreaInOf(this.region.nameArr[this.region.nameArr.length-1],this.pagination.currentPage,this.pagination.pageSize,this.keywords)
          this.$message({
            message: "删除成功",
            type: "success"
          });
        }
      })
      .catch(err=>{
         console.log(err);
        this.$Bus.$emit('Loading',false)
      })
    },
    //查看详情
    phyData(data){
      this.isShow = true;
      this.$Bus.$emit('Loading',true)
      this.getRuleForm(data.id)
    },
    //绑定人脸设备
    phyFace(data) {
      this.ruleForm.area_name= '',//区域名称
      this.ruleForm.company_id_arr= '',//选择企业id数组
      this.ruleForm.company_id= '',//选择企业id
      this.ruleForm.case_info_id= '',//案场id
      this.ruleForm.length= '',//区域长度
      this.ruleForm.width='',//区域宽度
      this.ruleForm.square_meters='',//区域面积
      this.ruleForm.area_desc='',//区域描述
      this.ruleForm.tags='',//标签id列表
      this.ruleForm.tags_name='',//标签名称列表
      this.ruleForm.tags_arr=[],//标签id列表
      this.ruleForm.areaType=[1],//区域标签选择
      this.ruleForm.table_code='',//案场table_code
      this.ruleForm.opening_hours_id='',//营业时间id
      this.ruleForm.opening_hours_name='',//营业时间名称
      this.$nextTick(()=>{
        this.isShowFace=true;
        this.$Bus.$emit('Loading',true);
        this.getRuleForm(data.id);
      })
      
    },
    //绑定客流设备
    phyPassFlow(data){
      this.ruleForm.area_name= '',//区域名称
      this.ruleForm.company_id_arr= '',//选择企业id数组
      this.ruleForm.company_id= '',//选择企业id
      this.ruleForm.case_info_id= '',//案场id
      this.ruleForm.length= '',//区域长度
      this.ruleForm.width='',//区域宽度
      this.ruleForm.square_meters='',//区域面积
      this.ruleForm.area_desc='',//区域描述
      this.ruleForm.tags='',//标签id列表
      this.ruleForm.tags_name='',//标签名称列表
      this.ruleForm.tags_arr=[],//标签id列表
      this.ruleForm.areaType=[1],//区域标签选择
      this.ruleForm.table_code='',//案场table_code
      this.ruleForm.opening_hours_id='',//营业时间id
      this.ruleForm.opening_hours_name='',//营业时间名称
      this.$nextTick(()=>{
        this.isShowPassFlow=true;
        this.$Bus.$emit('Loading',true);
        this.getRuleForm(data.id);
      })
    },
    //绑定销售数据
    phySale(data){
      this.isShowPos = true
      this.posDeviceZoneData.case_info_id = data.case_info_id
      this.posDeviceZoneData.area_id = data.id
      let url = '/sys/area-info/get-area?areaId='+ data.id
      this.$api.get(url)
      .then(data=>{
        if(data == '10001'){
          this.$message.error('无权操作该数据')
          this.$Bus.$emit('Loading',false);
          return
        }
        if(data){
          this.HeadName.caseName=data.data.case_info_name;
          this.HeadName.areaName=data.data.area_name;
          this.posData.zone_list = data.data.pos_list || []
        }else{
          this.posData.zone_list = [];
          this.HeadName={        
            caseName:'',
            areaName:'',
          };
        }
      })
    },
    //获取区域信息数据
    getRuleForm(id){
      let url = '/sys/area-info/get-area?areaId='+ id
      this.$api.get(url)
      .then(data=>{
        if(data == '10001'){
          this.$message.error('无权操作该数据')
          this.$Bus.$emit('Loading',false);
          return
        }
        if(data){
          let _data = data.data;
          this.ruleForm.id = _data.id
          this.ruleForm.area_name = _data.area_name
          this.ruleForm.company_name = _data.company_name;//企业名称
          this.ruleForm.company_id_arr = Array.of(_data.company_id);//企业id
          this.ruleForm.area_desc = _data.area_desc
          this.ruleForm.company_id = _data.company_id
          this.ruleForm.case_info_id = _data.case_info_id;//案场id
          this.ruleForm.case_info_name = _data.case_info_name;//案场名称
          this.ruleForm.length = _data.length
          this.ruleForm.width = _data.width
          this.ruleForm.square_meters = _data.square_meters
          this.ruleForm.tags_name = _data.tags_name;
          this.ruleForm.opening_hours_id = _data.opening_hours_id
          let areaTypeArr = _data.tag_list.filter(x=>{
            return x.type == 1
          });
          let tags_name = _data.tag_list.filter(x=>{
            return x.type != 1
          });
          this.ruleForm.areaType = areaTypeArr.map(x=>{
            return x.id
          })
          this.ruleForm.tags_arr = tags_name ? tags_name.map(x=>x.id) : []
          this.ruleForm.tags_name = tags_name ? tags_name.map(x=>x.name).join(',') : ''
          this.areaData.zone_list = _data.area_zone_list.map( (x,i)=>{
            x.sort_number = x.sort_number ? x.sort_number : (i + 1)
            return x
          })
          this.area_face.device_list = _data.area_face_device_list.map( (x,i)=>{
            x.sort_number = x.sort_number ? x.sort_number : (i + 1)
            return x
          })
          this.algorithmCheckeds = _data.calc_tags ? _data.calc_tags.split(',').map(Number) : [];
          this.getOpeningList(_data.company_id);
        }
        this.xxyc=(this.ruleForm.length||this.ruleForm.width||this.ruleForm.square_meters)?true:false;
        this.isDisabled = true;
        this.$Bus.$emit('Loading',false)
      })
    },
    //一级模态框
    //已打开一级模态框
    editVisibleOpenedFace(){
      this.FacerowDrop();
    },
    editVisibleOpenedPassFlow(){
      this.rowDrop();
    },
    //选择案场change
    changeCaseInfo(val){
      if(val){
        //赋值table_code
        for(let i in this.caseInfoOptions){
          if(val == this.caseInfoOptions[i].id){
            this.ruleForm.table_code = this.caseInfoOptions[i].table_code
          }
        }
        this.getCase(val)
        // console.log(this.ruleForm.table_code);
      }
    },
    getCase(id){
      let url = '/sys/case-info/get?case_info_id=' + id
      this.$api.get(url)
      .then(data=>{
        if(data && data.data){
          this.openingDataTable.map(x=>{
            if(data.data.opening_hours_id && x.id == data.data.opening_hours_id){
              this.ruleForm.opening_hours_name = x.name
            }
          })
        }
      })
    },
    //一级模态框保存按钮
    confirmDialog(formName){
      let data = {};
      let model = null;
      let url = ''
      this.$refs[formName].validate(valid => {
        if (valid) {
          model = this.$refs[formName].model;
          if (this.isDisabled) {
            // console.log(model,'model');
            data.area_name = model.area_name
            data.area_desc = model.area_desc
            data.area_type_list = model.areaType
            // data.area_zone_list = this.areaData.zone_list;
            // data.face_device_list = this.area_face.device_list;
            // data.calc_tags = this.algorithmCheckeds.join(',');
            data.length = model.length
            data.width = model.width
            data.square_meters = model.square_meters
            data.tag_id_list = model.tags_arr
            data.opening_hours_id  = this.ruleForm.opening_hours_id
            url = "/sys/area-info/update_base?area_id="+ model.id;
            this.$Bus.$emit('Loading',true);
            // console.log(data,'提交参数');
            this.modifymenu(url, data);
          } else{
            data.area_name = model.area_name
            data.case_info_id = model.case_info_id
            data.length = model.length
            data.width = model.width
            data.square_meters = model.square_meters
            data.area_desc = model.area_desc
            data.tag_id_list = model.tags_arr
            data.area_type_list = model.areaType
            // data.area_zone_list = this.areaData.zone_list;
            // data.face_device_list = this.area_face.device_list;
            // data.calc_tags = this.algorithmCheckeds.join(',');
            data.opening_hours_id  = this.ruleForm.opening_hours_id
            url = "/sys/area-info/save_base";
            this.$Bus.$emit('Loading',true)
            // console.log(data,'提交参数');
            this.addPhy(url, data);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //新增保存
    addPhy(url, data) {
      this.$api.post(url, data)
      .then(data => {
        if(data == '10001'){
          this.$message.error('无权操作该数据')
          this.$Bus.$emit('Loading',false);
          return
        }
        if(data){
          // console.log(data);
          this.$api.get('/sys/report_assist_new/refresh_auth_cache')
          .then(data=>{}).catch(err=>{ console.log(err);})

          this.$message({
            message: "新增成功",
            type: "success"
          });
          this.getAreaInOf(this.region.nameArr[this.region.nameArr.length-1],this.pagination.currentPage,this.pagination.pageSize,this.keywords)
          this.isShow = false;
        }else{
          this.$Bus.$emit('Loading',false)
        }
      })
    },
    //修改保存
    modifymenu(url,data){
      this.$api.put(url, data)
      .then(data => {
        if(data == '10001'){
          this.$message.error('无权操作该数据')
          this.$Bus.$emit('Loading',false);
          return
        }
        if(data){
          // console.log(data);
          this.$api.get('/sys/report_assist_new/refresh_auth_cache')
          .then(data=>{}).catch(err=>{ console.log(err);})
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.getAreaInOf(this.region.nameArr[this.region.nameArr.length-1],this.pagination.currentPage,this.pagination.pageSize,this.keywords)
          this.isShow = false;
          this.isShowFace=false;
          this.isShowPassFlow=false;
        }else{
          this.$Bus.$emit('Loading',false)
        }
      })
    },

  
    //关闭搜索监测设备列表
    closeMonitorList(){
      this.deviceZoneData.device_datas = [];
      this.deviceZoneData.multipleSelection = [];
      this.deviceZoneData.multipleSelectionAll = [];
      this.deviceZoneData.currentPage = 1;
      this.deviceZoneData.pageSize = 10;
      this.deviceZoneData.total = 0;
      this.deviceZoneData.keywords = '';
      this.deviceZoneData.is_online='';
      this.deviceZoneData.search_type='1';
      this.deviceZoneData.zoneType='';
      this.$refs.table.clearSelection();
    },
    //关闭搜索人脸设备列表
    FacecloseMonitorList(){
      this.facedeviceZoneData.device_datas = [];
      this.facedeviceZoneData.multipleSelection = [];
      this.facedeviceZoneData.multipleSelectionAll = [];
      this.facedeviceZoneData.currentPage = 1;
      this.facedeviceZoneData.pageSize = 10;
      this.facedeviceZoneData.total = 0;
      this.facedeviceZoneData.keywords = '';
      this.facedeviceZoneData.is_online='';
      this.facedeviceZoneData.search_type='1';
      this.facedeviceZoneData.zoneType='';
      this.$refs.Facetable.clearSelection();
    },
    //区域长度change事件
    lengthChange(val){
      if(val && this.ruleForm.width){
        this.ruleForm.square_meters =  parseFloat(val * this.ruleForm.width).toFixed(2);
      }else{
        this.ruleForm.square_meters = ''
      }
    },
    //区域宽度change事件
    widthChange(val){
      if(val && this.ruleForm.length){
        this.ruleForm.square_meters =  parseFloat(val * this.ruleForm.length).toFixed(2)
      }else{
        this.ruleForm.square_meters = ''
      }
    },
    // 二级模态框
    //营业时间
    //点击营业时间修改按钮
    openingOpen(){
      if(!this.ruleForm.company_id){
        this.$message.warning('请选选择所属企业')
        return
      }

      this.showOpening = true
    },
    //打开营业时间模态框
    openedOpening(){
      this.$nextTick(()=>{
        this.openingDataTable.map(x=>{
          if(x.id == this.ruleForm.opening_hours_id){
            this.$refs.openingTable.setCurrentRow(x);
          }
        })
      });
    },
    //关闭营业时间模态框
    closeOpening(){
      this.$refs.openingTable.clearSelection();
    },
    //获取营业时间列表
    getOpeningList(company_id = ''){
      let url = '/sys/opening_hours/list?company_id='+ company_id
      this.$api.get(url)
      .then(data=>{
        if(data == '10001'){
          this.$message.error('无权操作该数据')
          this.$Bus.$emit('Loading',false);
          return
        }
        if(data){
          let _data = data.data
          this.openingDataTable = _data.map(x=>{
            x.isCommon = x.is_common ? '是' : '否';
            if(this.ruleForm.opening_hours_id && x.id == this.ruleForm.opening_hours_id){
              this.ruleForm.opening_hours_name = x.name
            }
            return x
          });
        }else{
          this.openingDataTable = []
        }
        this.$Bus.$emit('Loading',false)
      })
      .catch(err=>{
         console.log(err);
        this.openingDataTable = [];
        this.$Bus.$emit('Loading',false)
      })
    },
    //打开营业时间详情
    openingData(data){
      data.item_list.sort((x,y)=>{
        if(x.level > y.level) return 1
        if(x.level < y.level) return -1
        return 0
      })
      this.showOpeningContent = true
      this.openingContent.name = data.name
      this.openingContent.info = data.info
      this.openingContent.item_list = data.item_list
    },
    //选中营业时间事件
    handleCurrentChange(data){
      if(data){
        this.$set(this.ruleForm,'opening_hours_id',data.id)
        this.$set(this.ruleForm,'opening_hours_name',data.name)
      }
    },
    //关闭一级客流设备
    PassFlowCloseDialog(){
      this.areaData.zone_list = [];
    },
    //保存一级客流设备
    PassFlowConfirmDialog(){
      let parmas={};
      parmas=this.areaData.zone_list;
      let calc_tags = this.algorithmCheckeds.join(',');
      let  url = "/sys/area-info/update_area_zone?area_id="+this.ruleForm.id+'&calc_tags='+calc_tags;
      this.$Bus.$emit('Loading',true);
      this.modifymenu(url,parmas);
    },
    //二级级模态框
    //打开设备照射区域列表查看是否有可以选中的数据
    openSelectDeviceZone(){
      
      let arr=[];
      for(let item in this.areaData.zone_list){
       arr[item]=this.areaData.zone_list[item];
      }
      this.deviceZoneData.multipleSelectionAll=arr;
      this.changePageCoreRecordData();
      this.getDeviceZoneList()
    },
    isChange(){
      this.deviceZoneData.currentPage=1;
      this.changePageCoreRecordData();
      this.getDeviceZoneList()
    },
    //获取设备照射区域列表
    getDeviceZoneList(){
      this.$Bus.$emit('Loading',true)
      let url = '/sys/device_zone/search_zone?search_type='+ this.deviceZoneData.search_type + '&zone_type='+ this.deviceZoneData.zoneType +
        '&page=' + this.deviceZoneData.currentPage + '&page_size=' + this.deviceZoneData.pageSize + '&keywords=' + encodeURIComponent(this.deviceZoneData.keywords) +
        '&is_online=' + this.deviceZoneData.is_online + '&org_type=2&org_id_list='+ this.ruleForm.case_info_id
      this.$api.get(url)
      .then(data=>{
        if(data == '10001'){
          this.$message.error('无权操作该数据')
          this.$Bus.$emit('Loading',false);
          return;
        }
        if(data){
          let _data = data.data;
          this.deviceZoneData.dialogTableVisible = true;
          this.deviceZoneData.device_datas = _data.dataList;
          this.deviceZoneData.total = _data.dataCount;
          this.deviceZoneData.currentPage = _data.pageCode;
          this.deviceZoneData.pageSize = _data.pageSize;
        }else{
          this.deviceZoneData.device_datas = [];
        }
        setTimeout(() => {
            this.setSelectRow();
        }, 200);
        this.$Bus.$emit('Loading',false);
      })
      .catch(err=>{
         console.log(err);
        this.$Bus.$emit('Loading',false);
      })
    },
    //CheckBox 是否可以勾选
    checkSelectable(row){
      // console.log(row);
      let arr = [];
      for(let i in this.areaData.zone_list){
        arr.push(this.areaData.zone_list[i].id);
      }
      return !arr.includes(row.id);
    },
    //保存已勾选
    handleAddData(){
        this.changePageCoreRecordData();
        if (this.deviceZoneData.multipleSelectionAll.length <= 0) {           
            this.$message({  message: '无勾选数据！', type: 'warning' });
            return;
        }
        let arr=[];
        for(let item in this.deviceZoneData.multipleSelectionAll)
        {
         arr[item]=this.deviceZoneData.multipleSelectionAll[item];
        }
        this.areaData.zone_list=arr;
        if (this.areaData.zone_list && this.areaData.zone_list.length > 0) {
          for (let i = 0; i < this.areaData.zone_list.length; i++) {
            this.areaData.zone_list[i].zone_maker = this.areaData.zone_list[i].zone_maker ? this.areaData.zone_list[i].zone_maker :this.areaData.zone_list[i].zone_type;
            this.$set(this.areaData.zone_list[i], 'sort_number', i+1);
          }
        }
				this.deviceZoneData.dialogTableVisible = false;
		},
    // 设置选中的方法
    setSelectRow() {
      if (!this.deviceZoneData.multipleSelectionAll || this.deviceZoneData.multipleSelectionAll.length <= 0) {
        return;
      }
      // 标识当前行的唯一键的名称
      let idKey = this.deviceZoneData.idKey;
      let selectAllIds = [];
      this.deviceZoneData.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey]);
      });
      this.$refs.table.clearSelection();
      for (var i = 0; i < this.deviceZoneData.device_datas.length; i++) {
        if (selectAllIds.indexOf(this.deviceZoneData.device_datas[i][idKey]) >= 0) {
          // 设置选中，记住table组件需要使用ref="table"
          this.$refs.table.toggleRowSelection(this.deviceZoneData.device_datas[i], true);
        }
      }
    },
    // 记忆选择核心方法
    changePageCoreRecordData() {
      // 标识当前行的唯一键的名称
      let idKey = this.deviceZoneData.idKey;
      let that = this;
      // 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
      if (this.deviceZoneData.multipleSelectionAll.length <= 0) {
        this.deviceZoneData.multipleSelectionAll = this.deviceZoneData.multipleSelection;
        return;
      }
      // 总选择里面的key集合
      let selectAllIds = [];
      this.deviceZoneData.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey]);
      });
      let selectIds = [];
      // 获取当前页选中的id
      this.deviceZoneData.multipleSelection.forEach(row => {
        selectIds.push(row[idKey]);
        // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
        if (selectAllIds.indexOf(row[idKey]) < 0) {
          that.deviceZoneData.multipleSelectionAll.push(row);
        }
      });
      let noSelectIds = [];
      // 得到当前页没有选中的id
      this.deviceZoneData.device_datas.forEach(row => {
        if (selectIds.indexOf(row[idKey]) < 0) {
          noSelectIds.push(row[idKey]);
        }
      });
      noSelectIds.forEach(id => {
        if (selectAllIds.indexOf(id) >= 0) {
          for (let i = 0; i < that.deviceZoneData.multipleSelectionAll.length; i++) {
            if (that.deviceZoneData.multipleSelectionAll[i][idKey] == id) {
              // 如果总选择中有未被选中的，那么就删除这条
              that.deviceZoneData.multipleSelectionAll.splice(i, 1);
              break;
            }
          }
        }
      });
    },
    deviceZoneDataCurrentChange(val) {
      // 改变页的时候调用一次
      this.changePageCoreRecordData();
      this.deviceZoneData.currentPage = val;
      this.getDeviceZoneList();
    },
    deviceZoneDataSizeChange(val) {
      // 改变每页显示条数的时候调用一次
      this.changePageCoreRecordData();
      this.deviceZoneData.pageSize = val;
      this.getDeviceZoneList();
    },
    handleSelectionChange(val) {
      // table组事件,记件选中得加上@selection-change="handleSelectionChange"
      this.deviceZoneData.multipleSelection = val;
    },
    getAllSelectionData() {
      // 再执行一次记忆勾选数据匹配，目的是为了在当前页操作勾选后直接获取选中数据
      this.changePageCoreRecordData();
    },

    // 数组去重
    unique(key, arr){
      // var arr = this;
      if(arr.length == 0) return false
      var n = [arr[0]];
      for (var i = 1; i < arr.length; i++) {
        if (key === undefined) {
          if (n.indexOf(arr[i]) == -1) n.push(arr[i]);
        } else {
          inner: {
            var has = false;
            for (var j = 0; j < n.length; j++) {
              if (arr[i][key] == n[j][key]) {
                has = true;
                break inner;
              }
            }
          }
          if (!has) {
            n.push(arr[i]);
          }
        }
      }
      return n;
    },
    getRowKeys(row){
      return row.id;
    },
    //删除行
    delDevice(index){
      this.areaData.zone_list.splice(index,1)
      //加入排序
      if (this.areaData.zone_list && this.areaData.zone_list.length > 0) {
        for (let i = 0; i < this.areaData.zone_list.length; i++) {
          this.$set(this.areaData.zone_list[i], 'sort_number', i+1);
        }
      }
      this.$message({
        type: 'success',
        message: '删除成功!'
      });
    },
    // 行拖拽
    rowDrop() {
      const tbody = document.querySelector('#isChoiceTable tbody');
      const _this = this;
      if(tbody){
        Sortable.create(tbody, {
          handle:".allowDrag",
          onEnd({newIndex, oldIndex}) {
            const currRow = _this.areaData.zone_list.splice(oldIndex, 1)[0];
            _this.areaData.zone_list.splice(newIndex, 0, currRow);
            for (let i = 0; i < _this.areaData.zone_list.length; i++) {
              _this.$set(_this.areaData.zone_list[i], 'sort_number', i+1);
            }
          }
        })
      }
    },
    //计算方式change事件
    changeAlgo(val){
      if(val.length>this.used_algo.length){
        let newVal = val[val.length-1]
        let tag=-1;
        let group=null;
        this.algorithmList.forEach((ele,i)=>{
          if(ele.tag===newVal){
            group=ele.group;
            tag=ele.tag;
          }
        })
        for (let i = this.algorithmList.length - 1; i >= 0; i--) {
          let ele = this.algorithmList[i];
          if(ele.group===group && ele.tag!==tag){
            let index = this.algorithmCheckeds.indexOf(ele.tag)
            if(index>=0)
              this.algorithmCheckeds.splice(index,1)
          }
        }
      }
      this.used_algo=val
      // this.algorithmCheckeds.splice(1,1)
    },
    //选择照射区域子类型
    zoneMakerChange(data,index){
      this.$set(this.areaData.zone_list,index,data);
    },
    //区域标签change事件
    areaTypeChange(val){
      if(!val){
        this.$refs.ruleForm.validateField('areaType');//触发form表单中校验所属企业是否选择
      }
    },

    //人脸设备
    //打开人脸区域列表查看是否有可以选中的数据
    openFaceDeviceZone(){
      if(!this.ruleForm.case_info_id){
        this.$message.warning('请选选择所属案场')
        return
      }
      let arr=[];
      for(let item in this.area_face.device_list){
       arr[item]=this.area_face.device_list[item];
      }
      this.facedeviceZoneData.multipleSelectionAll=arr;
      this.FacechangePageCoreRecordData();
      this.getFaceDeviceZoneList();
    },
    //人脸保存
    FaceConfirmDialog(){
      let parmas={};
      parmas = this.area_face.device_list;
      let  url = "/sys/area-info/update_area_face_device?area_id="+this.ruleForm.id;
      this.$Bus.$emit('Loading',true);
      // console.log(parmas);
      // return 
      this.modifymenu(url, parmas);
    },
    //关闭人脸一级模态框
    FaceCloseDialog(){
      this.area_face.device_list=[];
      
    },
    FaceisChange(){
      this.facedeviceZoneData.currentPage=1;
      this.FacechangePageCoreRecordData();
      this.getFaceDeviceZoneList();
    },
    // 人脸行拖拽
    FacerowDrop() {
      const tbody = document.querySelector('#isFaceChoiceTable tbody');
      const _this = this;
      if(tbody){
        Sortable.create(tbody, {
          handle:".allowDrag",
          onEnd({newIndex, oldIndex}) {
            const currRow = _this.area_face.device_list.splice(oldIndex, 1)[0];
            _this.area_face.device_list.splice(newIndex, 0, currRow);
            for (let i = 0; i < _this.area_face.device_list.length; i++) {
              _this.$set(_this.area_face.device_list[i], 'sort_number', i+1);
            }
          }
        })
      }
    },
    //人脸删除行
    FacedelDevice(index){
      this.area_face.device_list.splice(index,1)
      //加入排序
      if (this.area_face.device_list && this.area_face.device_list.length > 0) {
        for (let i = 0; i < this.area_face.device_list.length; i++) {
          this.$set(this.area_face.device_list[i], 'sort_number', i+1);
        }
      }
      this.$message({
        type: 'success',
        message: '删除成功!'
      });
    },
    // 人脸设置选中的方法
    FacesetSelectRow() {
      if (!this.facedeviceZoneData.multipleSelectionAll || this.facedeviceZoneData.multipleSelectionAll.length <= 0) {
        return;
      }
      // 标识当前行的唯一键的名称
      let idKey = this.facedeviceZoneData.idKey;
      let selectAllIds = [];
      this.facedeviceZoneData.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey]);
      });
      this.$refs.Facetable.clearSelection();
      for (var i = 0; i < this.facedeviceZoneData.device_datas.length; i++) {
        if (selectAllIds.indexOf(this.facedeviceZoneData.device_datas[i][idKey]) >= 0) {
          // 设置选中，记住table组件需要使用ref="table"
          this.$refs.Facetable.toggleRowSelection(this.facedeviceZoneData.device_datas[i], true);
        }
      }
    },
    // 人脸记忆选择核心方法
    FacechangePageCoreRecordData() {
      // 标识当前行的唯一键的名称
      let idKey = this.facedeviceZoneData.idKey;
      let that = this;
      // 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
      if (this.facedeviceZoneData.multipleSelectionAll.length <= 0) {
        this.facedeviceZoneData.multipleSelectionAll = this.facedeviceZoneData.multipleSelection;
        return;
      }
      // 总选择里面的key集合
      let selectAllIds = [];
      this.facedeviceZoneData.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey]);
      });
      let selectIds = [];
      // 获取当前页选中的id
      this.facedeviceZoneData.multipleSelection.forEach(row => {
        selectIds.push(row[idKey]);
        // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
        if (selectAllIds.indexOf(row[idKey]) < 0) {
          that.facedeviceZoneData.multipleSelectionAll.push(row);
        }
      });
      let noSelectIds = [];
      // 得到当前页没有选中的id
      this.facedeviceZoneData.device_datas.forEach(row => {
        if (selectIds.indexOf(row[idKey]) < 0) {
          noSelectIds.push(row[idKey]);
        }
      });
      noSelectIds.forEach(id => {
        if (selectAllIds.indexOf(id) >= 0) {
          for (let i = 0; i < that.facedeviceZoneData.multipleSelectionAll.length; i++) {
            if (that.facedeviceZoneData.multipleSelectionAll[i][idKey] == id) {
              // 如果总选择中有未被选中的，那么就删除这条
              that.facedeviceZoneData.multipleSelectionAll.splice(i, 1);
              break;
            }
          }
        }
      });
    },
    //获取人脸设备区域列表
    getFaceDeviceZoneList(){
      this.$Bus.$emit('Loading',true);
      let url = '/sys/face_device/search_device?'+
          '&keywords=' + encodeURIComponent(this.facedeviceZoneData.keywords) + '&search_type=' + this.facedeviceZoneData.search_type + '&page='+ this.facedeviceZoneData.currentPage + '&page_size=' + this.facedeviceZoneData.pageSize
      let parmas = {
        case_info_id_list:[this.ruleForm.case_info_id]
      }
      this.$api.post(url,parmas)
      .then(data=>{
        if(data == '10001'){
          this.$message.error('无权操作该数据')
          this.$Bus.$emit('Loading',false);
          return;
        }
        if(data){
          let _data = data.data;
          this.facedeviceZoneData.dialogTableVisible = true;
          this.facedeviceZoneData.device_datas = _data.dataList;
          this.facedeviceZoneData.total = _data.dataCount;
          this.facedeviceZoneData.currentPage = _data.pageCode;
          this.facedeviceZoneData.pageSize = _data.pageSize;
        }else{
          this.facedeviceZoneData.device_datas = [];
        }
        setTimeout(() => {
            this.FacesetSelectRow();
        }, 200);
        this.$Bus.$emit('Loading',false);
      })
      .catch(err=>{
         console.log(err);
        this.$Bus.$emit('Loading',false);
      })
    },

    //人脸保存已勾选
    FacehandleAddData(){
        this.FacechangePageCoreRecordData();
        if (this.facedeviceZoneData.multipleSelectionAll.length <= 0) {           
            this.$message({  message: '无勾选数据！', type: 'warning' });
            return;
        }
        let arr=[];
        for(let item in this.facedeviceZoneData.multipleSelectionAll)
        {
         arr[item]=this.facedeviceZoneData.multipleSelectionAll[item];
        }
        this.area_face.device_list=arr;
        if (this.area_face.device_list && this.area_face.device_list.length > 0) {
          for (let i = 0; i < this.area_face.device_list.length; i++) {
            this.area_face.device_list[i].zone_maker = this.area_face.device_list[i].zone_maker ? this.area_face.device_list[i].zone_maker :this.area_face.device_list[i].zone_type;
            this.$set(this.area_face.device_list[i], 'sort_number', i+1);
          }
        }
				this.facedeviceZoneData.dialogTableVisible = false;
		},
    //人脸CheckBox 是否可以勾选
    FacecheckSelectable(row){
      // console.log(row);
      let arr = [];
      for(let i in this.area_face.device_list){
        arr.push(this.area_face.device_list[i].id);
      }
      return !arr.includes(row.id);
    },
    FacehandleSelectionChange(val) {
      // 人脸table组事件,记件选中得加上@selection-change="handleSelectionChange"
      this.facedeviceZoneData.multipleSelection = val;
    },
    FacedeviceZoneDataCurrentChange(val) {
      // 人脸改变页的时候调用一次
      this.FacechangePageCoreRecordData();
      this.facedeviceZoneData.currentPage = val;
      this.getFaceDeviceZoneList();
    },
    FacedeviceZoneDataSizeChange(val) {
      // 人脸改变每页显示条数的时候调用一次
      this.FacechangePageCoreRecordData();
      this.facedeviceZoneData.pageSize = val;
      this.getFaceDeviceZoneList();
    },

    //绑定销售数据方法

    //点击选择pos设备
    openSelectPosDeviceZone(){
      let arr=[];
      for(let item in this.posData.zone_list){
        arr[item]=this.posData.zone_list[item];
      }
      this.posDeviceZoneData.multipleSelectionAll=arr;
      this.changePageCoreRecordDataPos()
      this.getPosDeviceZoneList();
    },
    
    //获取pos设备列表
    getPosDeviceZoneList(){
      this.$Bus.$emit('Loading',true);
      let url = '/sys/pos/search_pos?search_type='+ this.posDeviceZoneData.search_type + '&page=' + this.posDeviceZoneData.currentPage +
        '&page_size=' + this.posDeviceZoneData.pageSize + '&keywords=' + encodeURIComponent(this.posDeviceZoneData.keywords) +
        '&is_online=' + this.posDeviceZoneData.is_online + '&org_type=2'
      let params ={
        case_info_id_list : Array.of(this.posDeviceZoneData.case_info_id)
      }
      this.$api.post(url,params)
      .then(data=>{
        if(data == '10001'){
          this.$message.error('无权操作该数据')
          this.$Bus.$emit('Loading',false);
          return
        }
        // console.log(data);
        if(data){
          this.posDeviceZoneData.dialogTableVisible = true;
          let _data = data.data
          this.posDeviceZoneData.device_datas = _data.dataList
          this.posDeviceZoneData.total = _data.dataCount;
          this.posDeviceZoneData.currentPage = _data.pageCode;
          this.posDeviceZoneData.pageSize = _data.pageSize;
        }else{
          this.posDeviceZoneData.device_datas = []
        }
        setTimeout(() => {
          this.setPosSelectRow();
        }, 200);
        this.$Bus.$emit('Loading',false)
      })
      .catch(err=>{
         console.log(err);
        this.$Bus.$emit('Loading',false)
      })
    },
    posIsChange(){
      this.posDeviceZoneData.currentPage=1;
      this.changePageCoreRecordDataPos();
      this.getPosDeviceZoneList()
    },
    // 选中设备监测点事件
    posHandleSelectionChange(val){
      this.posDeviceZoneData.multipleSelection = val
    },
    posDeviceSizeChange(val){
      this.changePageCoreRecordDataPos();
      this.posDeviceZoneData.pageSize = val
      this.getPosDeviceZoneList()
    },
    posCurrentChange(val){
      // 改变每页显示条数的时候调用一次
      this.changePageCoreRecordDataPos();
      this.posDeviceZoneData.currentPage = val;
      this.getPosDeviceZoneList();
    },

    // 确定选中的设备监测点数据
    selectedPosDeviceData(){
      this.changePageCoreRecordDataPos();
      if (this.posDeviceZoneData.multipleSelectionAll.length <= 0) {
        this.$message({  message: '无勾选数据！', type: 'warning' });
        return;
      }
      let arr=[];
      for(let item in this.posDeviceZoneData.multipleSelectionAll) {
        arr[item]=this.posDeviceZoneData.multipleSelectionAll[item];
      }
      this.posData.zone_list=arr;
      this.posDeviceZoneData.dialogTableVisible = false;
    },
    posCheckSelectable(row){
      let arr = [];
      for(let i in this.posData.zone_list){
        arr.push(this.posData.zone_list[i].id)
      }
      return !arr.includes(row.id)
    },
    // 过滤数据判断是否选中
    posDeviceZoneIsSelected ( ){
      // 合并数组
      this.posData.zone_list = [...this.posData.zone_list,...this.posDeviceZoneData.multipleSelection]
      //数组去重
      this.posData.zone_list = this.unique("id", this.posData.zone_list) ? this.unique("id", this.posData.zone_list) : [];
    },
    //关闭搜索监测设备列表
    closePosMonitorList(){
      this.posDeviceZoneData.device_datas = [];
      this.posDeviceZoneData.multipleSelection = [];
      this.posDeviceZoneData.currentPage = 1;
      this.posDeviceZoneData.pageSize = 10;
      this.posDeviceZoneData.total = 0;
      this.posDeviceZoneData.keywords = '';
      this.posDeviceZoneData.is_online='';
      this.posDeviceZoneData.search_type='1';
      this.posDeviceZoneData.zoneType='';
      this.$refs.posDeviceZoneTable.clearSelection();
      this.posDeviceZoneData.deleteDeviceZoneIds = [];
    },
    //删除行
    delPosDevice(index){
      this.posData.zone_list.splice(index,1)
      this.$message({
        type: 'success',
        message: '删除成功!'
      });
    },
    //绑定销售数据保存按钮
    posConfirmDialog(){
      let url = '/sys/area-info/bind_sale_pos'
      let pos_id_list = this.posData.zone_list.map(x=>x.id)
      // console.log(pos_id_list);
      let data = {
        area_id:this.posDeviceZoneData.area_id,
        pos_id_list:pos_id_list
      }
      // 3.log(data);
      this.$api.post(url,data)
      .then(data=>{
        if(data == '10001'){
          this.$message.error('无权操作该数据')
          this.$Bus.$emit('Loading',false);
          return
        }
        if(data){
          this.$message({
            message: "保存成功",
            type: "success"
          });
          this.isShowPos=false;
          this.getAreaInOf(this.region.nameArr[this.region.nameArr.length-1],this.pagination.currentPage,this.pagination.pageSize,this.keywords)
        }else{
          this.$Bus.$emit('Loading',false)
        }
      })
    },
    //关闭模态框
    posCloseDialog(){
      this.posData.zone_list = [];
      this.posDeviceZoneData.device_datas = [];
      this.posDeviceZoneData.multipleSelection = [];
      this.posDeviceZoneData.multipleSelectionAll = [];
      this.posDeviceZoneData.currentPage = 1;
      this.posDeviceZoneData.pageSize = 10;
      this.posDeviceZoneData.total = 0;
      this.posDeviceZoneData.keywords = '';
      
      this.HeadName={        
            caseName:'',
            areaName:'',
      };
    },
    // 记忆选择核心方法
    changePageCoreRecordDataPos() {
      // 标识当前行的唯一键的名称
      let idKey = this.posDeviceZoneData.idKey;
      let that = this;
      // 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
      if (this.posDeviceZoneData.multipleSelectionAll.length <= 0) {
        this.posDeviceZoneData.multipleSelectionAll = this.posDeviceZoneData.multipleSelection;
        return;
      }
      // 总选择里面的key集合
      let selectAllIds = [];
      this.posDeviceZoneData.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey]);
      });
      let selectIds = [];
      // 获取当前页选中的id
      this.posDeviceZoneData.multipleSelection.forEach(row => {
        selectIds.push(row[idKey]);
        // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
        if (selectAllIds.indexOf(row[idKey]) < 0) {
          that.posDeviceZoneData.multipleSelectionAll.push(row);
        }
      });
      let noSelectIds = [];
      // 得到当前页没有选中的id
      this.posDeviceZoneData.device_datas.forEach(row => {
        if (selectIds.indexOf(row[idKey]) < 0) {
          noSelectIds.push(row[idKey]);
        }
      });
      noSelectIds.forEach(id => {
        if (selectAllIds.indexOf(id) >= 0) {
          for (let i = 0; i < that.posDeviceZoneData.multipleSelectionAll.length; i++) {
            if (that.posDeviceZoneData.multipleSelectionAll[i][idKey] == id) {
              // 如果总选择中有未被选中的，那么就删除这条
              that.posDeviceZoneData.multipleSelectionAll.splice(i, 1);
              break;
            }
          }
        }
      });
    },
    // 设置选中的方法
    setPosSelectRow() {
      if (!this.posDeviceZoneData.multipleSelectionAll || this.posDeviceZoneData.multipleSelectionAll.length <= 0) {
        return;
      }
      // 标识当前行的唯一键的名称
      let idKey = this.posDeviceZoneData.idKey;
      let selectAllIds = [];
      let that = this;
      this.posDeviceZoneData.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey]);
      });
      this.$refs.posDeviceZoneTable.clearSelection();
      for (var i = 0; i < this.posDeviceZoneData.device_datas.length; i++) {
        if (selectAllIds.indexOf(this.posDeviceZoneData.device_datas[i][idKey]) >= 0) {
          // 设置选中，记住table组件需要使用ref="table"
          this.$refs.posDeviceZoneTable.toggleRowSelection(this.posDeviceZoneData.device_datas[i], true);
        }
      }
    },
    //时间转换
    getTime(str){
      if(str){
        str=str.toString();
        let timeStr=this.insertStr(this.insertStr(this.insertStr(this.insertStr(this.insertStr(this.insertStr(str,4,"/"),7,"/"),10,"  "),14,":"),17,":"),19,"");
        return timeStr;
      }else{
        return ''
      }
    },
    insertStr(soure, start, newStr){
      return soure.slice(0, start) + newStr + soure.slice(start);
    }
  },
  watch: {}
};
</script>
